import React from 'react';
import { Link } from 'react-router';
import { Breadcrumb, Button, Form, Input, Table, Row, Col, Pagination, } from 'antd';

const FormItem = Form.Item;


let List = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },

    getInitialState() {
        return {
            data: [],
            pagination: {
                current: 1,
                pageSize: 10
            }
        }
    },

    componentDidMount() {
        this.handleSearch();
    },
    rowKey(data) {
        console.log(data);
        return data.id;

    },
    handleTableChange(pagination) {
        const pager = this.state.pagination;
        pager.current = pagination.current;
        this.setState({
            pagination: pager
        });
        this.fetch();
    },


    handleSearch() {
      this.setState({
        pagination: {
          current: 1
        }
      })
        this.fetch();
    },
    handleReset() {
        this.props.form.resetFields();
    },
     fetch() {
     let forms = this.props.form.getFieldsValue();
     let page = this.state.pagination.current;
     let params = Object.assign({}, {pageSize: 10, currentPage: page}, forms)
     let _me = this
     Utils.sendAjax({
     url: '/statistic/rent',
     data: JSON.stringify(params),
     callback: function (result) {
     if (result.code == '200') {
     _me.setState({
     data: result.data,
     pagination: result.page
     })
     }
     }
     })
     },


    render () {
        const { getFieldProps } = this.props.form;


        const columns = [{
            title: '房源地址',
            dataIndex: 'address',
        }, {
            title: '房间名称',
            dataIndex: 'roomName',
        },{
            title:'是否整租',
            render :(text,record) =>{
            return (
              <span>{record.isShared == 1 ? '是' : '否'}</span>
            )
      }
        }, {
            title: '租客姓名',
            dataIndex: 'renterName',
        }, {
            title: '交费开始日期',
            dataIndex: 'startTime',
        }, {
            title: '交费结束日期',
            dataIndex: 'endTime',
        }, {
            title: '交费时间',
            dataIndex: 'payTime',
        }, {
            title: '缴纳金额',
            dataIndex: 'payAmount',
        }];

        return (

            <div>

                <div className="search-bar">
                    <Form inline>
                        <FormItem label="关键字">
                            <Input {...getFieldProps('keyWord') } placeholder="房间名/租客名"/>
                        </FormItem>
                        <FormItem>
                            <Button type="primary" onClick={this.handleSearch} style={{marginRight: 20}}>查询</Button>

                            <Button type="default" onClick={this.handleReset}>重置</Button>
                        </FormItem>
                    </Form>
                </div>
                <Table rowKey={this.rowKey} columns={columns} dataSource={this.state.data}
                 onChange={this.handleTableChange}
                 pagination={this.state.pagination}/>
            </div>


        );
    }
});

List = Form.create()(List);
export default List